  <template>
  <div class="ordersDiv" id="donation">
    <h2>我的捐赠：</h2>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="物品图">
        <template slot-scope="scope">
          <img
            :src="scope.row.imageUrlList"
            alt="加载中..."
            width="80"
            height="80"
          />
        </template>
      </el-table-column>
      <el-table-column label="物品" prop="donationName"> </el-table-column>

      <el-table-column label="接收地点" prop="donationAddress">
      </el-table-column>
      <el-table-column label="物品类型" prop="donationCategory">
      </el-table-column>
      <el-table-column label="物品描述" prop="donationDescription">
      </el-table-column>
      <el-table-column label="物品发布时间" prop="postTime"> </el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="queryinfo.query"
            size="mini"
            placeholder="输入商品名搜索"
            ><el-button
              type="primary"
              @click="clickSearch"
              icon="el-icon-search"
              slot="append"
              v-loading.fullscreen.lock="fullscreenLoading"
            ></el-button
          ></el-input>
        </template>
        <template slot-scope="scope">
          <el-button
            size="medium"
            type="warning"
            @click="getTimestamp(scope.$index, scope.row)"
            >时间线</el-button
          >
          <el-button
            size="medium"
            type="danger"
            @click="deleteDonation(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryinfo.pageNum"
      :page-sizes="[5, 10, 20, 40]"
      :page-size="queryinfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog title="捐赠物品时间线" width="600px" :visible.sync="timeStampDialogVisible">
      <template>
        <el-timeline>
          <el-timeline-item
            v-for="(item, index) in timeStamp"
            :key="index"
            placement="top"
          >
            <el-card>
              <h4>{{ item.content }}</h4>
              <p>时间：{{ item.timeStamp }}</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "person-donation",
  data() {
    return {
      tableData: [],
      queryinfo: {
        pageNum: 1, //初始页
        pageSize: 5, //每页的数据
        query: "",
      },
      timeStampDialogVisible: false,
      timeStamp: [],
      total: 0,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      //加载数据
      let jsonObj = {};
      jsonObj.pageNum = this.queryinfo.pageNum;
      jsonObj.pageSize = this.queryinfo.pageSize;
      jsonObj.query = this.queryinfo.query;
      jsonObj.userId = window.sessionStorage.getItem("userId");
      let self = this;
      $.get(
        "http://waiterxiaoyy.free.idcfengye.com/web/getdonationlist",
        jsonObj,
        function (data) {
          self.tableData = data.data;
          self.total = data.count;
        },
        "json"
      );
    },
    clickButton() {
      this.centerDialogVisible2 = false;
      if (this.dialogValue === "提交成功") {
        this.centerDialogVisible = false;
      }
    },
    // 初始页currentPage、初始每页数据数pageSize和数据data
    handleSizeChange: function (size) {
      this.query.pageSize = size;
      this.getData();
      // console.log(this.pageSize)  //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.qeury.pageNum = currentPage;
      this.getData();
      // console.log(this.currentPage)  //点击第几页
    },
    clickSearch() {
      this.pageNum = 1;
      this.pageSize = 5;
      this.getData();
    },
    deleteDonation(index, row) {
      //点击了取消出售按钮
      let jsonObj = {};
      this.$confirm("此操作将永久删除该捐赠, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let self = this;
          var donationId = row.donationId;
          $.ajax({
            type: "POST",
            url:
              "http://waiterxiaoyy.free.idcfengye.com/web/deleteDonationById?donationId=" +
              donationId,
            dataType: "json",
            success: function (data) {
              if (data.code === 200) {
                self.$message.success(data.msg);
                self.getData()
              } else {
                self.$message.error(data.msg);
              }
            },
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getTimestamp(index, row) {
      let self = this;
          var donationId = row.donationId;
          $.ajax({
            type: "Get",
            url:
              "http://waiterxiaoyy.free.idcfengye.com/web/getdonationtimestamp?donationId=" +
              donationId,
            dataType: "json",
            success: function (data) {
              if (data.code === 200) {
                self.timeStampDialogVisible = true;
                self.timeStamp = data.data;
              } else {
                self.$message.error(data.msg);
              }
            },
        });
    }
  },
};
</script>

<style scoped>
.ordersDiv {
  width: 80%;
  margin: 0 auto;
  padding-top: 50px;
}
</style>
